<template>
    <div>
      <van-icon name="arrow-left" size="25" class="i1" @click="back"/>
      <van-icon name="service-o" size="25" class="i3" @click="customer"/>
      <van-icon name="chat-o" size="25" class="i2" @click="message"/><br>
      <h2 class="wait" v-if="this.form.status==3 || this.form.status==1">等待顾客取件<van-icon name="arrow" size="20" @click="recording"/></h2>
      <h2 class="wait" v-if="this.form.status==6">已取件<van-icon name="arrow" size="20" @click="recording"/></h2>
      <h2 class="wait" v-if="this.form.status==4">已撤回<van-icon name="arrow" size="20" @click="recording"/></h2>
      <van-notice-bar color="#FFA324" background="#FFF5DD" left-icon="info-o" class="no1"
                      v-if="this.form.status==3">
        包裹已超时{{parseInt(require('moment')(new Date()).diff(require('moment')(form.timestamp),'hours',false)/24)}}天
      </van-notice-bar><br>
      <div>
        <van-cell-group inset class="v1">
          <van-cell title="派件费" value="₱100.00" :border="false"/>
          <van-cell title="优惠" value="-₱10.00" :border="false"/>
          <van-cell value="₱90.00" :border="false" value-class="detail1">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <b>实付款</b>
            </template>
          </van-cell>
        </van-cell-group>
      </div><br>
      <div>
        <van-cell-group inset class="v1">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <b>收件人信息</b>
              <van-icon name="phone-o" class="v2"/>
            </template>
          </van-cell>
          <van-cell title="手机号码" :border="false">{{form.phone}}</van-cell>
          <van-cell title="包裹单号" :border="false">
             <span>{{form.baoguoid}}</span>
               |
             <span @click="copy" class="sp8">复制</span>
          </van-cell>
        </van-cell-group>
      </div><br>
      <div>
        <van-cell-group inset class="v1">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <b>订单信息</b>
            </template>
          </van-cell>
          <van-cell title="订单号码" :border="false">
            <span>{{form.baoguoid}}</span>
            |
            <span @click="copy" class="sp8">复制</span>
          </van-cell>
          <van-cell title="派件时间" :border="false">{{form.timestamp}}</van-cell>
          <van-cell title="费用类型" value="单笔收费" :border="false"/>
        </van-cell-group>
      </div><br>
      <div>
        <van-cell-group inset class="v1">
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <b>柜机信息</b>
            </template>
          </van-cell>
          <van-cell title="柜机编号" :border="false">{{form.machineCode}}</van-cell>
          <van-cell title="箱格位置" :border="false">{{form.address}}</van-cell>
          <van-cell title="柜机位置" :border="false">{{form.location}}</van-cell>
          <div class="map1">
            <template>
              <div class="box">
                <el-amap
                    vid="amapContainer"
                    :zoom="zoom"
                    :events="events"
                ></el-amap>
              </div>
            </template>
          </div>
         </van-cell-group>
      </div>
    </div>
</template>

<script>
import axios from "axios";
import { lazyAMapApiLoaderInstance } from 'vue-amap';

export default {
  name: 'Index',
  data() {
    return {
        active:'',
        form:{},
        id:'',
        a: '',
        b: '',
        arr: [],
        map: '',
        zoom: 10,
        events: {},
    };
  },
  methods:{
    findaddress() {
      axios.get("http://localhost:11219/dspatch/package/getaddress/"+this.id).then(res=>{
        if (res.data && res.data.data) {
          this.arr = Object.values(res.data.data);
          this.a = this.arr[0];
          this.b = this.arr[1];
          console.log("a", this.a);
          console.log("b", this.b);
          this.initMap();
        }
      })
    },
    initMap() {
      if (this.a !== null && this.b !== null) {
        lazyAMapApiLoaderInstance.load().then(() => {
          this.map = new AMap.Map("amapContainer", {
            center: new AMap.LngLat(this.a, this.b),
            zoom: this.zoom,
          });
          var marker = new AMap.Marker({
            map: this.map,
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [this.a, this.b],
          });
          marker.setMap(this.map);
        });
      }
    },
    copy(){

    },
    message(){

    },
    customer(){

    },
    back(){
      this.$router.push({
        path: '/index/Index',
      });
    },
    recording(){
      this.$router.push({
        path: '/index/Recording',
        query: {
          active: this.active,
        }
      });
    }
  },
  created() {
    this.active = this.$route.query.active;
    this.id=this.$route.query.id;
    axios.get("http://localhost:11219/dspatch/package/"+this.id).then(res=>{
      if(res.status==200){
        this.form=res.data;
      }
    })
    this.findaddress();
  },
};
</script>

<style scoped>
   body{
     background-color: #F5F5F5;
   }
   .i1{
     position: absolute;
     top: 0;
     left: 0;
     margin-left: 10px;
     margin-top: 5px;
   }
   .i2{
     position: absolute;
     top: 0;
     right: 0;
     margin-right: 10px;
     margin-top: 5px;
   }
   .i3{
     position: absolute;
     top: 0;
     right: 0;
     margin-right: 40px;
     margin-top: 5px;
   }
   .wait{
     margin-right: 156px;
     margin-top: 10px;
   }
   .no1{
     border-radius: 25px;
     width: 210px;
     height: 25px;
   }
   .detail1{
     color: red !important;
     font-size: 20px;
   }
   .v1{
     text-align: left;
   }
   .v2{
     float: right;
     margin-top: 5px;
   }
   .h1{
     width: 315px;
   }
   .sp8{
     color: blue;
     float: right;
   }
   .img3{
     margin-left: 22px;
     margin-bottom: 10px;
   }
   .box {
     width: 90%;
     height: 90%;
     box-sizing: border-box;
   }
   .map1 {
     width: 95%;
     height: 250px;
     margin-top: 20px;
     margin-left: 30px;
   }
</style>
